<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>在跳转页面时，有两种方法来指定跳转目标--对象表示</h3>
        <nav>
            <router-link to="/detail">detail</router-link> 
            <router-link to="/item">item</router-link> 
            <!-- 
                v-bind:动态绑定属性值。这里的to是一个属性名，如果你希望它的值是一个对象
                则需要使用动态绑定的方式。
                v-bind:to="{path:'/item'}" -->
            <router-link :to="{path:'/item'}">对象表示-普通跳转</router-link> 
            <router-link :to="{path:'/item?a=100'}">对象表示-带查询参数</router-link> 
            <router-link :to="{path:'/item',query:{a:100}}">对象表示-带查询参数-query属性</router-link> 
            

            <router-link :to="{path:'/detail/1001'}">对象表示-带路径参数</router-link> 

            <!-- <router-link :to="{path:'/detail',params:{id:1002}}">对象表示-带路径参数-params</router-link>  -->
            <!-- 如果to后面跟一个路由对象, params和path不能共存，应该不写path，改成 name. -->
            <router-link :to="{name:'detail',params:{id:1002}}">对象表示-带路径参数-params</router-link>

            <button @click="hClick">编程式导航-对象格式表示</button> 
        </nav>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

        // 两种方法来指定跳转目标
        // 1. path字符串表示
        // <router-link to="/link"></router-link>
        // 2. 对象表示
         // <router-link :to="{path:'/link'}"></router-link>

        //  （1） 普通跳转，不带参数
        //   <router-link :to="{path:'/item'}">对象表示-普通跳转</router-link> 

        //  （2） 带查询参数
        //    <router-link :to="{path:'/item?a=100'}">对象表示-带查询参数</router-link> 
        //    <router-link :to="{path:'/item',query:{a:100}}">对象表示-带查询参数-query属性</router-link> 
        
        //  （3） 带路径参数
        //    <router-link :to="{path:'/detail/1001'}">对象表示-带路径参数</router-link> 
        //    <router-link :to="{name:'detail',params:{id:1002}}">对象表示-带路径参数-params</router-link> 


        // 编程式导航
        //   （1）this.$router.push(path字符串)
        //   （2）this.$router.push(对象)


         const router = new VueRouter({
             routes: [
                 {path: "/", component:{template:`<div>主页</div>`}},
                 // name: 约定路由的名字。
                 {name:'detail', path: "/detail/:id", component:{template:`<div>detail{{$route.params.id}}</div>`}},
                 {path: "/item", component:{template:`<div>item {{$route.query.a}}</div>`}}
             ]
         })

         const vm = new Vue({
             el:'#app',
             router: router,
             methods: {
                hClick () {
                    //   （1）this.$router.push(path字符串)
                    // this.$router.push('/item')
                    //   （2）this.$router.push(对象)
                    // this.$router.push({path:'/item'})
                    this.$router.push({path:'/item',query:{a:100}})

                }
             }
         })
    </script>
</body>
</html>